<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div class="checkPointIds_change_scc">
                    <el-select filterable v-if='role_off' popper-class="xiala_css" @change="checkPointIds_change"
                        collapse-tags collapse-tags-tooltip multiple clearable v-model="checkPointIds"
                        placeholder="请选择客户" style="width: 260px">
                        <template #header>
                            <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in getCustomerList_list" :key="item.id" :label="item.customerName"
                            :value="item.id" />
                    </el-select>
                    <el-select filterable popper-class="xiala_css" @change="getPipeLineListByCusId_change" collapse-tags
                        collapse-tags-tooltip multiple clearable v-model="getPipeLineListByCusId_value"
                        placeholder="请选择管线" style="width: 260px;margin-left:15px;">
                        <template #header>
                            <el-checkbox v-model="checkAll2" :indeterminate="indeterminate2" @change="handleCheckAll2">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in getPipeLineListByCusId_list" :key="item.id" :label="item.pipeLineName"
                            :value="item.id" />
                    </el-select>
                    <el-select filterable popper-class="xiala_css" collapse-tags collapse-tags-tooltip multiple
                        clearable v-model="getCheckPointListByLineId_value" placeholder="请选择监测点"
                        style="width: 260px;margin-left:15px;">
                        <template #header>
                            <el-checkbox v-model="checkAll3" :indeterminate="indeterminate3" @change="handleCheckAll3">
                                全选
                            </el-checkbox>
                        </template>
                        <el-option v-for="item in getCheckPointListByLineId_list" :key="item.id"
                            :label="item.checkPointName" :value="item.id" />
                    </el-select>



                    <el-date-picker popper-class="time_css" style="width: 340px;margin-left:15px;"
                        :default-time="defaultTime" v-model="details_time" type="datetimerange"
                        start-placeholder="选择开始时间" end-placeholder="选择结束时间" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <!-- <div class="del_btn_Css">

                    <el-button @click="del_btn" type="danger" icon="DeleteFilled">删除</el-button>
                    <el-button @click="out_btn" type="warning" icon="Promotion">导出</el-button>
                </div> -->
            </template>
            <div>
                <el-tabs type="card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane style="overflow: auto;" label="电流" name="电流">
                        <div style="width:80vw;height:600px;">
                            <div v-if="getKmlcpycList_off" ref="chart_container2" style="width: 80vw; height: 600px;">
                            </div>
                            <div v-else style="width: 100%; height: 600px;font-size:20px;font-weight:700;text-align: center;
                            line-height: 350px;color: #686822;">
                                请先选择客户、管线、监测点
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane style="overflow: auto;" label="电压电阻" name="电压电阻">
                        <div style="width:80vw;height:600px;">
                            <div ref="chart_container3" style="width: 80vw; height: 600px;"></div>
                        </div>
                    </el-tab-pane>


                </el-tabs>
            </div>
        </el-card>
        <!-- 弹窗 -->
        <div>
            <!-- 表格筛选 -->
            <div v-if="wid == 0" style="position: absolute;top:100px;z-index: 2;"
                :style="icon_off ? 'right:1190px;' : 'right:1300px;'">
                <el-icon @click="icon_btn" :size="20">
                    <Setting />
                </el-icon>
                <div v-show="icon_off" style=" position: relative;top:-100px;left:50px;width: 130px;height:430px;background:#fff;overflow: hidden;border: 1px solid #f89898;
    border-radius: 5px;">
                    <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                        <div>
                            <el-button-group style="display: flex;justify-content: center; ">
                                <el-tooltip effect="dark" placement="bottom">
                                    <template #content>注意：取消选项会隐藏可视图的项目，<br />记得点击保存才会生效哦！ </template>
                                    <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                                </el-tooltip>
                                <!-- <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button> -->
                                <el-button title="保存" type="primary" @click="saveTableSet">保存</el-button>
                            </el-button-group>
                            <div class="col-items" style="height:400px; overflow-y: auto; ">
                                <el-checkbox @change="checkbox_btn" v-for="item in table_data_list_new"
                                    :key="item.label" v-model="item.off" :label="item.label" border>
                                </el-checkbox>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <!-- 表格筛选 -->
            <div v-if="wid == 1" style="position: absolute;top:100px;z-index: 2;"
                :style="icon_off ? 'right:0px;' : 'right:100px;'">
                <el-icon @click="icon_btn" :size="20">
                    <Setting />
                </el-icon>
                <div v-show="icon_off" style=" position: relative;top:-100px;left:50px;width: 130px;height:430px;background:#fff;overflow: hidden;border: 1px solid #f89898;
    border-radius: 5px;">
                    <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                        <div>
                            <el-button-group style="display: flex;justify-content: center; ">
                                <el-tooltip effect="dark" placement="bottom">
                                    <template #content>注意：取消选项会隐藏可视图的项目，<br />记得点击保存才会生效哦！ </template>
                                    <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                                </el-tooltip>
                                <!-- <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button> -->
                                <el-button title="保存" type="primary" @click="saveTableSet">保存</el-button>
                            </el-button-group>
                            <div class="col-items" style="height:400px; overflow-y: auto; ">
                                <el-checkbox @change="checkbox_btn" v-for="item in table_data_list_new"
                                    :key="item.label" v-model="item.off" :label="item.label" border>
                                </el-checkbox>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted, computed, watch, nextTick, markRaw } from 'vue'
import {
    getCustomerList, getPipeLineListByCusId, getCheckPointListByLineId, getSynSatelliteList,
} from '@/api/statistic_analysis.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { downFiles, } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {
    let screenWidth1 = window.innerWidth;
    if (screenWidth1 > 1800) {
        wid.value = 0
    } else {
        wid.value = 1
    }
    let analysis_of_insulation_joint_data = JSON.parse(localStorage.getItem('analysis_of_insulation_joint_data'))
    if (analysis_of_insulation_joint_data) {

        nuv_off.value = true
        await getCustomerList_api()
        await role_api()
    } else {
        await getCustomerList_api()
        await role_api()
    }
    if (activeName.value == '电流') {
        let jueyuan_1 = JSON.parse(localStorage.getItem('jueyuan_1'))
        jueyuan_1 ? table_data_list_new.value = jueyuan_1 : table_data_list_new.value = table_data_list1

    } else if (activeName.value == '电压电阻') {
        let jueyuan_2 = JSON.parse(localStorage.getItem('jueyuan_2'))
        jueyuan_2 ? table_data_list_new.value = jueyuan_2 : table_data_list_new.value = table_data_list2
    }



})
const wid = ref(0)
//#region 表格数据处理
const table_data_list_new = ref([])
const table_data_list1 = reactive([
    { label: '站内试片直流电流', off: true },
    { label: '站内试片交流电流', off: true },
    { label: '站内管道直流电流', off: true },
    { label: '站内管道交流电流', off: true },
    { label: '站外试片直流电流', off: true },
    { label: '站外试片交流电流', off: true },
    { label: '站外管道直流电流', off: true },
    { label: '站外管道交流电流', off: true },
])
const table_data_list2 = reactive([
    { label: '站内通电电位', off: true },
    { label: '站内断电电位', off: true },
    { label: '站内交流电压', off: true },
    { label: '站外通电电位', off: true },
    { label: '站外断电电位', off: true },
    { label: '站外交流电压', off: true },
    { label: '站内外绝缘阻值', off: true },
])
const resetTableSet = () => {

    if (activeName.value == '电流') {
        table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list1))
        localStorage.setItem('jueyuan_1', CircularJSON.stringify(table_data_list_new.value))
    } else if (activeName.value == '电压电阻') {
        table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list2))
        localStorage.setItem('jueyuan_2', CircularJSON.stringify(table_data_list_new.value))
    }

    icon_off.value = false
    search_btn()
}
const saveTableSet = () => {
    if (activeName.value == '电流') {
        localStorage.setItem('jueyuan_1', CircularJSON.stringify(table_data_list_new.value))
    } else if (activeName.value == '电压电阻') {
        localStorage.setItem('jueyuan_2', CircularJSON.stringify(table_data_list_new.value))
    }



    icon_off.value = false
    search_btn()
}



const icon_off = ref(false)
const icon_btn = () => {
    icon_off.value = !icon_off.value

}


const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}


//#endregion


let nuv_off = ref(false)
const data_list = ref([''])

//#region 登录角色判断 
//  
let role_off = ref(true)
let role_id = ref('')
let role_customerId = ref('')
const role_api = () => {
    let luser = JSON.parse(localStorage.getItem('luser'))
    if (luser.loginName != 'admin') {
        role_off.value = false
        role_id.value = luser.id
        role_customerId.value = luser.customerId
        checkPointIds.value = []
        checkPointIds.value.push(role_customerId.value)
        getCustomerList_list.value = []
        getCustomerList_list.value.push(role_customerId.value)
    }
}
// #endregion

//#region 搜索
//#region 客户
const getKmlcpycList_off = ref(false)
const getCustomerList_list = ref([])
const checkPointIds = ref([])
const checkAll = ref(false)
const indeterminate = ref(false)
watch(checkPointIds, (val) => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    if (val.length === 0) {
        checkAll.value = false
        indeterminate.value = false
    } else if (val.length === getCustomerList_list.value.length) {
        checkAll.value = true
        indeterminate.value = false
    } else {
        indeterminate.value = true
    }
})
const handleCheckAll = async (val) => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    indeterminate.value = false
    if (val) {
        checkPointIds.value = getCustomerList_list.value.map((_) => _.id)

    } else {
        checkPointIds.value = []
    }
    getCustomerList_api()
}
const checkPointIds_change = async (e) => {
    getPipeLineListByCusId_api()
}
const getCustomerList_api = () => {
    getPipeLineListByCusId_value.value = []
    getCheckPointListByLineId_value.value = []
    getCustomerList({}).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            getCustomerList_list.value = res.value
            if (nuv_off.value) {
                console.log(1)
                let analysis_of_insulation_joint_data = JSON.parse(localStorage.getItem('analysis_of_insulation_joint_data'))
                checkPointIds.value = analysis_of_insulation_joint_data.customerIds
            }
            getPipeLineListByCusId_api()

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}


//#endregion

//#region 管线
const getPipeLineListByCusId_list = ref([])
const getPipeLineListByCusId_value = ref([])
const checkAll2 = ref(false)
const indeterminate2 = ref(false)
watch(getPipeLineListByCusId_value, (val) => {
    getCheckPointListByLineId_value.value = []
    if (val.length === 0) {
        checkAll2.value = false
        indeterminate2.value = false
    } else if (val.length === getPipeLineListByCusId_list.value.length) {
        checkAll2.value = true
        indeterminate2.value = false
    } else {
        indeterminate2.value = true
    }
})
const handleCheckAll2 = (val) => {
    getCheckPointListByLineId_value.value = []
    indeterminate2.value = false
    if (val) {
        getPipeLineListByCusId_value.value = getPipeLineListByCusId_list.value.map((_) => _.id)

    } else {
        getPipeLineListByCusId_value.value = []
    }
    getCheckPointListByLineId_api()
}
const getPipeLineListByCusId_change = async (e) => {
    await getCheckPointListByLineId_api()
}
const getPipeLineListByCusId_api = () => {
    getCheckPointListByLineId_value.value = []
    getPipeLineListByCusId(checkPointIds.value.length > 0 ? checkPointIds.value : data_list.value).then(res => {
        if (res.resultStatus.resultCode == '0000') {
            getPipeLineListByCusId_list.value = res.value
            if (nuv_off.value) {

                let analysis_of_insulation_joint_data = JSON.parse(localStorage.getItem('analysis_of_insulation_joint_data'))
                getPipeLineListByCusId_value.value = analysis_of_insulation_joint_data.pipeLineIds


            }
            getCheckPointListByLineId_api()

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}
//#endregion

//#region 监测点
const getCheckPointListByLineId_value = ref([])
const getCheckPointListByLineId_list = ref([])
const checkAll3 = ref(false)
const indeterminate3 = ref(false)
watch(getCheckPointListByLineId_value, (val) => {
    if (val.length === 0) {
        checkAll3.value = false
        indeterminate3.value = false
    } else if (val.length === getCheckPointListByLineId_list.value.length) {
        checkAll3.value = true
        indeterminate3.value = false
    } else {
        indeterminate3.value = true
    }
})
const handleCheckAll3 = (val) => {
    indeterminate3.value = false
    if (val) {
        getCheckPointListByLineId_value.value = getCheckPointListByLineId_list.value.map((_) => _.id)

    } else {
        getCheckPointListByLineId_value.value = []
    }
}
const getCheckPointListByLineId_api = () => {
    let ps = {
        deviceType: '3',
        ids: getPipeLineListByCusId_value.value.length > 0 ? getPipeLineListByCusId_value.value : data_list.value
    }



    getCheckPointListByLineId(ps).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            getCheckPointListByLineId_list.value = res.value

            if (nuv_off.value) {
                let analysis_of_insulation_joint_data = JSON.parse(localStorage.getItem('analysis_of_insulation_joint_data'))
                getCheckPointListByLineId_value.value = analysis_of_insulation_joint_data.checkPointIds
                details_time.value[1] = analysis_of_insulation_joint_data.endTime

                details_time.value[0] = analysis_of_insulation_joint_data.startTime
                details_time.value = [analysis_of_insulation_joint_data.startTime, analysis_of_insulation_joint_data.endTime]
                getKmlcpycList_api()
                nuv_off.value = false
            }

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }

    })
}
//#endregion

//#region 时间
// 获取今天的年月日
const getCurrentDateTime = () => {
    let currentDate = new Date();

    // 获取当前日期的时间戳（以毫秒为单位）
    let timestamp = currentDate.getTime();

    // 计算昨天的时间戳
    let yesterdayTimestamp = timestamp - (24 * 60 * 60 * 1000);

    // 使用昨天的时间戳创建日期对象
    let yesterdayDate = new Date(yesterdayTimestamp);

    // 从昨天的日期对象中提取年、月、日、小时、分钟和秒
    let year = yesterdayDate.getFullYear();
    let month = String(yesterdayDate.getMonth() + 1).padStart(2, '0');
    let day = String(yesterdayDate.getDate()).padStart(2, '0');

    // 构建格式为 "YYYY-MM-DD HH:mm:ss" 的昨天时间字符串
    let yesterdayTime = `${year}-${month}-${day}`;
    return yesterdayTime;
}
const getCurrentDateTime2 = () => {
    let now = new Date();

    let year = now.getFullYear().toString().padStart(4, '0');
    let month = (now.getMonth() + 1).toString().padStart(2, '0');
    let day = now.getDate().toString().padStart(2, '0');
    let hours = now.getHours().toString().padStart(2, '0');
    let minutes = now.getMinutes().toString().padStart(2, '0');
    let seconds = now.getSeconds().toString().padStart(2, '0');

    let dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return dateTimeString;
}

const time1 = ref(getCurrentDateTime() + ' ' + '00:00:00')
const time2 = ref(getCurrentDateTime2())
const defaultTime = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
]
const details_time = ref([time1.value, time2.value])
//#endregion
//#region 异常统计图弹出

const chart = ref('')


//#endregion
const search_btn = () => {
    if (checkPointIds.value.length <= 0) {
        return ElMessage({
            message: '请选择客户！',
            type: 'warning',
        })
    } else if (getPipeLineListByCusId_value.value.length <= 0) {
        console.log(1, getPipeLineListByCusId_value.value)
        return ElMessage({
            message: '请选择管线！',
            type: 'warning',
        })
    } else if (getCheckPointListByLineId_value.value.length <= 0) {
        console.log(2, getCheckPointListByLineId_value.value)
        return ElMessage({
            message: '请选择监测点！',
            type: 'warning',
        })
    } else if (!details_time.value) {
        return ElMessage({
            message: '请选择时间！',
            type: 'warning',
        })
    }
    getKmlcpycList_api()

}
const getKmlcpycList_list = ref([])
const getKmlcpycList_api = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    let ps = {
        checkPointIds: getCheckPointListByLineId_value.value,
        customerIds: checkPointIds.value,
        pipeLineIds: getPipeLineListByCusId_value.value,
        startTime: details_time.value[0],
        endTime: details_time.value[1],
    }
    // localStorage.setItem('analysis_of_insulation_joint_data', CircularJSON.stringify(ps))
    getSynSatelliteList(ps).then(res => {

        if (res.resultStatus.resultCode == '0000') {
            getKmlcpycList_list.value = res.value
            getKmlcpycList_off.value = true
            if (activeName.value == '电流') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                basic_data()
            } else if (activeName.value == '电压电阻') {
                if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
                    chart.value.dispose();
                }
                ER_current()
            }

        } else {
            return ElMessage({
                message: res.resultStatus.resultMessage,
                type: 'warning',
            })
        }
        loading.close()
    })
    let tier = null
    clearTimeout(tier)
    tier = setTimeout(() => {
        loading.close()
    }, 5000)
}
const activeName = ref('电流')
const chart_container2 = ref('')
const handleClick = (tab, event) => {

    if (chart.value._componentsViews && chart.value._componentsViews.length > 0) {
        chart.value.dispose();
    }
    if (tab.props.name == '电流') {
        let jueyuan_1 = JSON.parse(localStorage.getItem('jueyuan_1'))
        jueyuan_1 ? table_data_list_new.value = jueyuan_1 : table_data_list_new.value = table_data_list1
        basic_data()
    } else if (tab.props.name == '电压电阻') {
        let jueyuan_2 = JSON.parse(localStorage.getItem('jueyuan_2'))
        jueyuan_2 ? table_data_list_new.value = jueyuan_2 : table_data_list_new.value = table_data_list2
        ER_current()
    }
}
// 电流
const basic_data = () => {
    nextTick(() => {
        let sampTimeArr = []
        let inDcCurrentArr = []
        let inAcCurrentArr = []
        let inPipeDcCurrentArr = []
        let inPipeAcCurrentArr = []
        let outDcCurrentArr = []
        let outAcCurrentArr = []
        let outPipeDcCurrentArr = []
        let outPipeAcCurrentArr = []

        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                sampTimeArr.push(getKmlcpycList_list.value[i].sampTime)
                inDcCurrentArr.push(getKmlcpycList_list.value[i].inDcCurrent)
                inAcCurrentArr.push(getKmlcpycList_list.value[i].inAcCurrent)
                inPipeDcCurrentArr.push(getKmlcpycList_list.value[i].inPipeDcCurrent)
                inPipeAcCurrentArr.push(getKmlcpycList_list.value[i].inPipeAcCurrent)
                outDcCurrentArr.push(getKmlcpycList_list.value[i].outDcCurrent)
                outAcCurrentArr.push(getKmlcpycList_list.value[i].outAcCurrent)
                outPipeDcCurrentArr.push(getKmlcpycList_list.value[i].outPipeDcCurrent)
                outPipeAcCurrentArr.push(getKmlcpycList_list.value[i].outPipeAcCurrent)

            }
            if (sampTimeArr.length > 25) {
                xIetm = parseInt(sampTimeArr.length / 25);
            } else {
                xIetm = 0;
            }
        }



        chart.value = markRaw(echarts.init(chart_container2.value));
        let data = ["站内试片直流电流", "站内试片交流电流", "站内管道直流电流", "站内管道交流电流", "站外试片直流电流", "站外试片交流电流", "站外管道直流电流", "站外管道交流电流"]
        let series = [{
            name: "站内试片直流电流",
            type: 'line',
            data: inDcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性


        }, {
            name: '站内试片交流电流',
            type: 'line',
            data: inAcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性



        }, {
            name: '站内管道直流电流',
            type: 'line',
            data: inPipeDcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站内管道交流电流',
            type: 'line',
            data: inPipeAcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外试片直流电流',
            type: 'line',
            data: outDcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外试片交流电流',
            type: 'line',
            data: outAcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外管道直流电流',
            type: 'line',
            data: outPipeDcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外管道交流电流',
            type: 'line',
            data: outPipeAcCurrentArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        },]
        for (let i = 0; i < table_data_list_new.value.length; i++) {
            if (table_data_list_new.value[i].off == false) {
                data.splice(data.indexOf(table_data_list_new.value[i].label), 1);
                series = series.filter(item => item.name !== table_data_list_new.value[i].label);
            }

        }
        let option = {
            title: {
                text: getKmlcpycList_list.value.length > 0 ? '时间区间：' + getKmlcpycList_list.value[0].sampTime + '~' + getKmlcpycList_list.value[getKmlcpycList_list.value.length - 1].sampTime : '',
                left: 'center'
            },
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        excludeComponents: ['dataZoom', 'toolbox']
                    }
                }
            },
            legend: {
                top: '6%',
                data: data,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 600
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                right: '10%',
                bottom: '23%',
                top: '25%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                name: '电流/A',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '采样时间',
                data: sampTimeArr,
                axisLabel: {
                    show: true,
                    interval: xIetm,
                    rotate: 45,
                    showMinLabel: true,
                    showMaxLabel: true,
                    textStyle: {
                        fontWeight: 600
                    }

                },
                // axisTick: {length:5},
            },
            series: series,
        };
        chart.value.setOption(option);
    })
}
// 电压电阻
const chart_container3 = ref('')
const ER_current = () => {
    nextTick(() => {
        let sampTimeArr = []
        let inPotentialArr = []
        let inOffPotentialArr = []
        let inAcVoltageArr = []
        let outPotentialArr = []
        let outOffPotentialArr = []
        let outAcVoltageArr = []
        let insulationValueArr = []
        let xIetm = ''
        if (getKmlcpycList_list.value.length > 0) {
            for (let i in getKmlcpycList_list.value) {
                sampTimeArr.push(getKmlcpycList_list.value[i].sampTime)
                inPotentialArr.push(getKmlcpycList_list.value[i].inPotential)
                inOffPotentialArr.push(getKmlcpycList_list.value[i].inOffPotential)
                inAcVoltageArr.push(getKmlcpycList_list.value[i].inAcVoltage)
                outPotentialArr.push(getKmlcpycList_list.value[i].outPotential)
                outOffPotentialArr.push(getKmlcpycList_list.value[i].outOffPotential)
                outAcVoltageArr.push(getKmlcpycList_list.value[i].outAcVoltage)
                insulationValueArr.push(getKmlcpycList_list.value[i].insulationValue)
            }
            if (sampTimeArr.length > 25) {
                xIetm = parseInt(sampTimeArr.length / 25);
            } else {
                xIetm = 0;
            }
        }
        chart.value = markRaw(echarts.init(chart_container3.value));
        let series = [{
            name: '站内通电电位',
            type: 'line',
            data: inPotentialArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站内断电电位',
            type: 'line',
            data: inOffPotentialArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站内交流电压',
            type: 'line',
            data: inAcVoltageArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外通电电位',
            type: 'line',
            data: outPotentialArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外断电电位',
            type: 'line',
            data: outOffPotentialArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站外交流电压',
            type: 'line',
            data: outAcVoltageArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        }, {
            name: '站内外绝缘阻值',
            type: 'line',
            data: insulationValueArr,
            symbolSize: 2,
            showSymbol: false,
            connectNulls: true,//添加此属性

        },]
        let data = ["站内通电电位", "站内断电电位", "站内交流电压", "站外通电电位", "站外断电电位", "站外交流电压", "站内外绝缘阻值"]

        for (let i = 0; i < table_data_list_new.value.length; i++) {
            if (table_data_list_new.value[i].off == false) {
                data.splice(data.indexOf(table_data_list_new.value[i].label), 1);
                series = series.filter(item => item.name !== table_data_list_new.value[i].label);
            }

        }
        let option = {
            title: {
                text: getKmlcpycList_list.value.length > 0 ? '时间区间：' + getKmlcpycList_list.value[0].sampTime + '~' + getKmlcpycList_list.value[getKmlcpycList_list.value.length - 1].sampTime : '',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: '6%',
                data: data,
                textStyle: {
                    fontSize: 16,
                    fontWeight: 600
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        excludeComponents: ['dataZoom', 'toolbox']
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        title: '保存为图片',
                        type: 'png',
                    }
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            grid: {
                left: '15%',
                right: '10%',
                bottom: '23%',
                top: '20%',
                containLabel: true,
            },

            yAxis: {
                type: 'value',
                name: '电压、电阻',
                boundaryGap: [0, 0.5],
                axisLabel: {
                    textStyle: {
                        fontWeight: 600
                    }

                },
            },
            xAxis: {
                name: '采样时间',
                data: sampTimeArr,
                axisLabel: {
                    interval: xIetm,
                    rotate: 45,
                    textStyle: {
                        fontWeight: 600
                    }
                },
            },
            series: series
        };
        chart.value.setOption(option);
    })
}


//#endregion

//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    pageNo: 1,
    pageSize: 14,
    checkPoints: [],
    customerIds: [],
    pipeLineIds: [],
    startTime: "",
    endTime: "",
    rules: '',

})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.pageNo = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {

    find_data.checkPoints = getCheckPointListByLineId_value.value,
        find_data.customerIds = checkPointIds.value,
        find_data.pipeLineIds = getPipeLineListByCusId_value.value,

        find_data.startTime = details_time.value[0],
        find_data.endTime = details_time.value[1],
        getKmlptycAlarmListByPage(find_data).then(res => {

            if (res.resultStatus.resultCode == '0000') {
                list_data.value = res.value.list
                total.value = res.value.total
            } else {
                return ElMessage({
                    message: res.resultStatus.resultMessage,
                    type: 'warning',
                })
            }

        })
}
//#endregion

//#region 表格数据处理
const table_data_list = reactive([
    { name: 'terminalNumber', displayName: '终端编号', minWidth: 150, enablePinning: true },
    { name: 'terminalName', displayName: '终端名称', minWidth: 200, enablePinning: true },
    { name: 'rules', displayName: '告警信息', minWidth: 200, enablePinning: true },
    { name: 'sampTime', displayName: '采样时间', minWidth: 150, enablePinning: true },
    { name: 'receiveTime', displayName: '接收时间', minWidth: 150, enablePinning: true },
    { name: 'onPotential', displayName: '通电电位/V', minWidth: 100, enablePinning: true },
    { name: 'outputCurrent', displayName: '输出电流/A', minWidth: 100, enablePinning: true },
    { name: 'outputVoltage', displayName: '输出电压/V', minWidth: 100, enablePinning: true },
    { name: 'anodeResistance', displayName: '阳极接地电阻/Ω', minWidth: '', enablePinning: true },
    { name: 'rssi', displayName: '信号强度', minWidth: 100, enablePinning: true },
])




//#endregion

//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion

//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        '是否确认删除该数据?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            let ps = []
            for (let i = 0; i < table_list.value.length; i++) {
                ps.push(table_list.value[i].id)
            }
            deleteKmlptyc(ps).then(res => {
                if (res.resultStatus.resultCode == '0000') {
                    list_api()
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.resultStatus.resultMessage,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 导出
const out_btn = () => {



    let ps = {
        checkPoints: getCheckPointListByLineId_value.value,
        customerIds: checkPointIds.value,
        pipeLineIds: getPipeLineListByCusId_value.value,
        startTime: details_time.value[0],
        endTime: details_time.value[1],

    }

    importErrorKmlptyc(ps).then(res => {
        downFiles(res, '恒电位仪告警')



    })


}
//#endregion

</script>

<style scoped lang='scss'>
::v-deep(.el-tabs__item) {
    background-color: #DBE0E5;
    color: black;
    width: 100px;
    text-align: center;
}

::v-deep(.is-active) {
    background-color: #3D5674;
    color: #fff;

}

.del_btn_Css {
    margin-top: 10px;
}

.list_data_Css {
    width: 100%
}

.current_change_btn_css {
    margin-top: 20px
}




.map_input {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.div_bg:hover {
    background-color: darkgray;
}
</style>
<style>
.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
